<template>
    <div>
        <div class="stats-container">
            <div class="stat-item">
                <p class="stat-value">{{ userCount }}</p>
                <p class="stat-label">用户总数</p>
            </div>
            <div class="stat-item">
                <p class="stat-value">{{ councelorCount }}</p>
                <p class="stat-label">咨询师总数</p>
            </div>
        </div>
      <div class="part-panel">
        <el-card>
          <div slot="header" class="card-title">
            <span>咨询师评分</span>
          </div>
          <div class="data-list" >
            <el-row :gutter="10">
              <el-col :span="12">
                <div ref="myCharts4AppWeekDataRef" class="chart"></div>
              </el-col>
            </el-row>
          </div>
        </el-card>
      </div>
    </div>
  </template>

  <script setup>
  import * as echarts from "echarts";
  import { ref, reactive, getCurrentInstance, nextTick, shallowRef } from "vue";
  const { proxy } = getCurrentInstance();

  const api = {
    getData4Councelor: "/index/getData",
  };

  const getOption = (title, xAxisData = [], seriesData = []) => {
    return {
      title: {
        text: title,
      },
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "shadow",
          textStyle: {
            color: "red",
          },
        },
      },
      legend: {
        x: 200,
      },
      grid: {
        left: 50,
        right: 0,
      },
      xAxis: {
        axisLine: {
          lineStyle: {
            color: "#90979c",
          },
        },
        data: xAxisData,
        axisLabel: {
          interval: 0,
          rotate: "45",
        },
      },
      yAxis: {
        type: "value",
      },
      series: seriesData,
    };
  };


  const myCharts4AppWeekDataRef = ref(null);
  const myCharts4AppWeekData = shallowRef();
  const init4AppWeekData = () => {
    nextTick(() => {

      myCharts4AppWeekData.value = echarts.init(myCharts4AppWeekDataRef.value);

      loadAppWeekData();
    });
  };
  init4AppWeekData();

  const userCount=ref(0);
  const councelorCount=ref(0);

  const loadAppWeekData = async () => {
    let result = await proxy.Request({
      url: api.getData4Councelor,
    });
    if (!result) {
      return;
    }

    userCount.value=result.data.userCount;
    councelorCount.value=result.data.councelorCount;
    // 提取 realName 和 rating
    const xAxisData = result.data.counselorInfoList.map(item => item.realName); // 横坐标数据
    const seriesData = [{
      type:"bar",
      data:result.data.counselorInfoList.map(item => item.rating),
      color:"#1B9CFC",
    }];
    myCharts4AppWeekData.value.setOption(
      getOption("咨询师评分", xAxisData, seriesData)
    );
  };




  </script>

  <style lang="scss" scoped>
  .stats-container {
    display: flex;
    justify-content: space-around; /* 使统计项在容器中均匀分布 */
    align-items: center; /* 垂直居中对齐 */
    padding: 20px;
    background-color: #f9f9f9; /* 背景颜色 */
    border-radius: 8px; /* 圆角边框 */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 添加轻微阴影 */
    margin-bottom: 20px;
}

.stat-item {
    text-align: center; /* 文本居中 */
}

.stat-value {
    font-size: 24px; /* 增大字体大小以突出显示数值 */
    font-weight: bold; /* 加粗字体 */
    margin: 0; /* 移除默认的段落间距 */
    color: #333; /* 设置较深的颜色以增强对比度 */
}

.stat-label {
    font-size: 16px; /* 设置标签文字大小 */
    color: #777; /* 设置较浅的颜色以区分主次信息 */
    margin-top: 5px; /* 给标签添加一些顶部外边距 */
}
  .chart {
    height: calc(100vh - 400px);
  }
  </style>
